<script setup lang="ts">
// import router from '@/router' //router实例
import { ref } from 'vue'
import { modileRules, passwordRules } from '@/utils/rules'
import { showFailToast, showSuccessToast, type FormInstance } from 'vant'
import { loginPassword, getCodeAPI, loginCode } from '@/services/user'
import { useLoginStore } from '@/stores'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute() //
const router = useRouter()
const store = useLoginStore() //仓库实例

// 点击右侧箭头事件
const onClickRight = () => {
  console.log('onClickRight')
  router.push('/hhh')
}

const mobile = ref<string>('13230000009')
const password = ref<string>('abc12345')
const isAgree = ref(false)

// 是否为密码登录
const isPassword = ref(true)

// 定义验证码数据
const code = ref('')

// 是否显示密码
const isShowPassword = ref(false)

// 拿取表单数据
const form = ref<FormInstance | null>(null)
// 登录按钮
const onSubmit = async () => {
  if (!isAgree.value) {
    return showFailToast('请勾选用户协议')
  }
  // 调用登录接口
  const res = isPassword.value
    ? await loginPassword(mobile.value, password.value)
    : await loginCode(mobile.value, code.value)
  console.log('1')
  store.updataLogin(res.data)
  // 消息提示
  showSuccessToast('登录成功')
  // 如果有回跳地址就回调=跳 没有就跳转到个人中心页
  router.push((route.query.returnUrl as string) || '/user')
}

// 获取短信验证码
const sendCode = async () => {
  // console.log(1)
  await form.value?.validate('mobile')
  const res = await getCodeAPI(mobile.value, 'login')
  // console.log(res)
  code.value = res.data.code
}
</script>
<template>
  <!-- 导航栏 -->
  <CpNavBar
    title="登录"
    right-text="注册"
    @onClickRight="onClickRight"
  ></CpNavBar>
  <!-- 头部 -->
  <div class="header">
    <h2>{{ isPassword ? '密码登录' : '短信验证码登录' }}</h2>
    <a href="javascript:;">
      <span @click="isPassword = !isPassword">{{
        !isPassword ? '密码登录' : '短信验证码登录'
      }}</span>
      <van-icon name="arrow" />
    </a>
  </div>
  <!-- 表单 -->
  <van-form @submit="onSubmit" autocomplete="off" ref="form">
    <van-cell-group inset>
      <van-field
        v-model="mobile"
        name="mobile"
        placeholder="请输入手机号"
        :rules="modileRules"
      />
      <van-field
        v-if="isPassword"
        v-model="password"
        :type="`${isShowPassword ? 'text' : 'password'}`"
        placeholder="请输入密码"
        :rules="passwordRules"
      >
        <template #button>
          <CpIcon
            @click="isShowPassword = !isShowPassword"
            :name="`login-eye-${isShowPassword ? 'on' : 'off'}`"
          ></CpIcon>
        </template>
      </van-field>
      <van-field
        v-else
        v-model="code"
        center
        clearable
        placeholder="请输入短信验证码"
      >
        <template #button>
          <span class="code" @click="sendCode">发送验证码</span>
        </template>
      </van-field>
    </van-cell-group>
    <div class="cp-cell">
      <van-checkbox v-model="isAgree" icon-size="16px">
        <span>我已同意</span>
        <a href="javascript:;">用户协议</a>
        <span>及</span>
        <a href="javascript:;">隐私条款</a>
      </van-checkbox>
    </div>
    <div class="cp-cell">
      <van-button round block type="primary" native-type="submit">
        登录
      </van-button>
    </div>
    <div class="cp-cell">忘记密码？</div>
  </van-form>
  <!-- 底部 -->
  <div class="login-other">
    <van-divider>第三方登录</van-divider>
    <div class="icon">
      <img src="@/assets/qq.svg" alt="" />
    </div>
  </div>
</template>
<style scoped lang="scss">
.header {
  display: flex;
  margin-left: -18px;
  justify-content: space-around;
  padding: 30px 0;
  height: 50px;
  line-height: 50px;
  h2 {
    font-weight: normal;
  }
}
.cp-cell {
  height: 52px;
  line-height: 24px;
  padding: 14px 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  .van-checkbox {
    a {
      color: var(--cp-primary);
      padding: 0 5px;
    }
  }
}
.login-other {
  margin-top: 60px;
  padding: 0 30px;
  .icon {
    display: flex;
    justify-content: center;
    img {
      width: 36px;
      height: 36px;
      padding: 4px;
    }
  }
}
.code {
  color: var(--cp-primary);
}
</style>
